import React from 'react';
import { Card ,Table } from 'antd';

const columns = [{
    title: 'Name',
    dataIndex: 'name',
    render: text => <a href="#">{text}</a>,
}, {
    title: 'Age',
    dataIndex: 'age',
}, {
    title: 'Address',
    dataIndex: 'address',
}];

const data = [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
}, {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
}, {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
}, {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sidney No. 1 Lake Park',
}];

export default class Order extends React.Component {

    state = {
        selectedRowKeys : [],
    };

    onSelectedRowKeysChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
    }   

    selectRow = (record) => {
        const selectedRowKeys = [...this.state.selectedRowKeys];
        if (selectedRowKeys.indexOf(record.key) >= 0) {
          selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
        } else {
          selectedRowKeys.push(record.key);
        }
        this.setState({ selectedRowKeys });
    }

    render() {

        const { selectedRowKeys } = this.state;
        const rowSelection  = {
            selectedRowKeys,
            onChange: this.onSelectedRowKeysChange
        };

        return (
            <Card>
                <Table 
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={data}
                    onRow={(record) => ({
                        onClick: () => {
                          this.selectRow(record);
                        },
                    })}
                />
            </Card>
        );
    }
}